import { useState } from 'react'
import logo from './logo.svg'
import './App.css'
import axios from 'axios'

const MAXCONTAIN = 3; // 生产消费者模式仓库最大容量,因为需要后端成功返回才能进行新的任务，因此设置最大容量为1

function App() {
  const [store, setStore] = useState([]); // 引用数据类型，即使原数组进行更新，没有更改数组的引用地址依旧不会触发react重新渲染
  const [lock, setLock] = useState(false);
  const [input, setInput] = useState('');
  const [page, setPage] = useState('')


  const producer = (e) => { //生产者模式
    if (!lock) {
      if (store.length < MAXCONTAIN) {
        setPage(e.target.value);
        let newStore = [...store];  // 原数组的地址发生改变，会触发react重新渲染
        newStore.push('Page');
        setStore(newStore);
      } else {
        // setLock(true);
        alert('仓库已满，清生产者等待');
      }
    }
  };

  const producerinput = (e) => { //生产者模式

    let delay = 1000;
    let timeout = null;
    return function () {
      clearTimeout(timeout);
      // console.log('1111');
      timeout = setTimeout(() => {
        if (!lock) {
          if (store.length < MAXCONTAIN) {
            setInput(e.target.value);
            let newStore = [...store];  // 原数组的地址发生改变，会触发react重新渲染
            newStore.push('Input');
            setStore(newStore);
          } else {
            setLock(true);
            alert('仓库已满，清生产者等待');
          }
        }
      }, delay)

    }()

  };




  const consumer = () => {//消费者模式
    // let dataProps = {   // 请求的数据格式
    //   'pic': 'https://s2.loli.net/2022/03/31/hPbn74XEKI9dVqW.png',
    //   'page': page,
    //   'input': input
    // }
    if (store.length != 0) {


      let newStore = [...store];
      let dataProps = newStore.shift();    // 队头弹出，即队列数据类型，先执行先发送请求的
      console.log(newStore, '----------');
      setStore(newStore);
      console.log(dataProps);
      if (dataProps == 'Input') {
        axios({
          method: 'post',
          url: 'http://localhost:8001',
          data: dataProps,
          withCredentials: true
        }).then(
          res => {
            console.log(res);
            console.log(res.data);
            alert(res.data.data);
          }
        )
      } else if (dataProps == 'Page') {
        axios({
          method: 'post',
          url: 'http://localhost:8001/page',
          data: dataProps,
          withCredentials: true
        }).then(
          res => {
            console.log(res);
            console.log(res.data);
            alert(res.data.data);
          }
        )
      }





    } else {
      alert('无剩余内容执行,请消费者等待');
    }

  }



  // const debounce = (fn, time) => { // 防抖 防止输入框onchange事件多次触发 
  //   let timeout = null
  //   return function () {
  //     clearTimeout(timeout)
  //     timeout = setTimeout(() => {
  //       fn.apply(this);
  //     }, time)
  //   }
  // }

  return (
    <div className="App">

      <p>当前product仓库容量:{store.length}</p>
      <p>当前input框的值:{input}</p>
      <p>当前page的页面:{page}</p>
      {/* <button onClick={producer}>点击自动容量</button> */}
      <button onClick={consumer}>手动请求后端接口，消耗仓库容量</button>
      <div className='form'>
        <input type='text' name='write' placeholder='请输入文字' onChange={producerinput} /><br />
        <input type='file' name='pictural' multiple /><br />
        分页:
        1<input type="radio" name="page" value='1' onClick={producer} />
        2<input type="radio" name="page" value='2' onClick={producer} />
        3<input type="radio" name="page" value='3' onClick={producer} />
      </div>
    </div>
  )
}

export default App
